<template>
  <view class="myOrder">
<!--    <view class="order-info-main">
     <li v-for="(item,index) in orderDetail" :key="index">
        <view class="order-title">
          <text class="order-num">订单号:{{item.orderNum}}</text>
          <text class="pay-state">{{getPaidState(item.paidType)}}</text>
        </view>
        <view class="order-detail">
          <view class="order-info">
            <text class="order-location">租借地点</text>
            <text class="order-location-name">门店名称展示</text>
          </view>
          <view class="order-info">
            <text class="order-location">租借时间</text>
            <text class="order-location-name">{{item.createTime}}</text>
          </view>
        </view>
        <view class="order-bottom">
          <view class="order-time-money">
            <p><span v-if="item.paidType < 4">1小时26分钟</span> <span class="money-info"
                v-if="item.paidType === 2 || item.paidType === 3"><text class="label">￥</text><text
                  class="money">{{item.money}}</text></span></p>
          </view>
          <view class="order-btn">
            <van-button v-if="item.paidType === 2" @click="gotoThere" color="linear-gradient(#0366E0, #1E50DC)"
              type="info" size="medium">
              支付
            </van-button>
            <view class="del" v-if="item.paidType === 3 || item.paidType === 4">
              <image src="@/static/images/delete.png" mode=""></image>
              <text>删除</text>
            </view>
          </view>
        </view>
      </li>
    </view> -->
    <view class="no-data">
      暂无数据
    </view>
  </view>
</template>

<script>
  import {
    checkPersonalOrderList
  } from '@/api/order'
  export default {
    data() {
      return {
        orderDetail: [{
            orderNum: 15589632447862,
            paidType: 2, // 1代表租借中，2代表待支付，3代表已完成， 4代表已换购
            createTime: '2023-11-06 11:20:30',
            money: '8.00'
          },
          {
            orderNum: 15589632447862,
            paidType: 1,
            createTime: '2023-11-06 11:20:30',
            money: ''
          },
          {
            orderNum: 15589632447862,
            paidType: 3,
            createTime: '2023-11-06 11:20:30',
            money: '8.00'
          },
          {
            orderNum: 15589632447862,
            paidType: 3,
            createTime: '2023-11-06 11:20:30',
            money: '8.00'
          },
          {
            orderNum: 15589632447862,
            paidType: 4,
            createTime: '2023-11-06 11:20:30',
            money: '8.00'
          },
        ]
      }
    },
    onShow() {
      this.checkPersonalOrderList()
    },
    methods: {
      async checkPersonalOrderList() {
        const {
          data
        } = await checkPersonalOrderList()
        console.log(data);
      },
      getPaidState(data) {
        if (data === 1) {
          return '租借中'
        } else if (data === 2) {
          return '待支付'
        } else if (data === 3) {
          return '已完成'
        } else if (data === 4) {
          return '已换购'
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .myOrder {
    min-height: 100vh;
    background-color: #F9F9F9;

    .order-info-main {
      padding: 15px;

      li {
        background-color: #FFFFFF;
        // padding: 15px;
        margin-bottom: 10px;

        .order-title {
          font-family: 'PingFang-SC-Regular', sans-serif;
          display: flex;
          justify-content: space-between;
          padding-bottom: 15px;
          border-bottom: 1px solid #F6F6F6;

          .order-num {
            font-size: 13px;
            color: #555555;
          }

          .pay-state {
            font-size: 14px;
            color: #105BDE;
          }
        }

        .order-detail {
          padding: 15px 0;
          border-bottom: 1px solid #F6F6F6;

          .order-info {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            color: #555555;
            margin-bottom: 20px;
          }

          .order-info:last-child {
            margin-bottom: unset;
          }
        }

        .order-bottom {
          margin-top: 15px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .order-time-money {
            font-family: 'PingFang-SC-Bold', sans-serif;

            .money-info {
              margin-left: 12px;

              .label {
                font-size: 14px;
                color: #D30F0F;
              }

              .money {
                font-size: 18px;
                color: #D30F0F;
              }
            }
          }

          .order-btn {

            ::v-deep .van-button {
              width: 90px;
              height: 37px !important;
              border-radius: 10px;
              font-size: 16px !important;
              font-family: 'PingFang-SC-Bold', sans-serif;
            }

            .del {
              display: flex;
              align-items: center;
              color: #656565;

              image {
                width: 16px;
                height: 17px;
              }

              text {
                margin-left: 5px;
                font-size: 14px;
              }
            }
          }
        }
      }
    }
    .no-data {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 16px;
      color: #ccc;
    }
  }
</style>
